<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>小游戏</title>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      position: relative;
      height: 100vh;
      overflow: hidden;
    }
    .top-right-buttons {
      position: fixed;
      top: 10px;
      right: 10px;
      display: flex;
      flex-direction: column;
      gap: 15px;
      z-index: 20;
    }
    .btn {
      display: flex;
      align-items: center;
      background: #eee;
      border-radius: 5px;
      padding: 5px 10px;
      cursor: pointer;
      user-select: none;
      font-size: 16px;
    }
    .btn-icon {
      font-size: 20px;
      margin-right: 6px;
    }
    .btn-key {
      font-weight: bold;
      color: #555;
    }
    .btn:hover {
      background: #ddd;
    }
    .play {
      margin-top: 300px;
      position: relative;
      height: 200px;
    }

    /* 左侧卡通女孩 */
    #cartoon-girl {
      position: relative;
      float: left;
      border: 2px solid red;
      width: 100px;
      height: auto;
      margin-left: 20px;
    }
    /* HP Bar Styles */
    #hp-container {
      position: fixed;
      bottom: 20px;
      left: 20px;
      width: 120px;
      height: 20px;
      background-color: #ddd;
      border: 1px solid #999;
      border-radius: 5px;
      z-index: 30;
    }

    #hp-bar {
      height: 100%;
      width: 100%;
      background-color: red;
      border-radius: 5px;
      transition: width 0.3s ease;
    }

    /* 右侧小怪兽 */
    #monster {
      position: relative;
      float: right;
      width: 100px;
      height: auto;
      margin-right: 20px;
    }

    #monster-hp-container {
      position: fixed;
      bottom: 20px;
      right: 20px;
      width: 120px;
      height: 20px;
      background-color: #ddd;
      border: 1px solid #999;
      border-radius: 5px;
      z-index: 30;
    }

    #monster-hp-bar {
      height: 100%;
      width: 100%;
      background-color: green;
      border-radius: 5px;
      transition: width 0.3s ease;
    }

    /* 火球，初始隐藏，绝对定位 */
    #fireball {
      position: absolute;
      top: 60px;
      right: 120px;
      width: 50px;
      height: auto;
      z-index: 10;
      display: none;
      border: 2px solid red;
    }

    /* 火球飞行动画 */
    @keyframes fireball-move {
      0% {
        right: 120px;
        top: 35px;
        opacity: 1;
      }
      100% {
        right: calc(100% - 120px);
        top: 35px;
        opacity: 1;
      }
    }

    #shield {
      position: absolute;
      top: -30px;
      left: -10px;
      width: 160px;
      height: 160px;
      background-color: rgba(0, 200, 255, 0.3);
      border-radius: 50%;
      border: 2px solid rgba(0, 200, 255, 0.6);
      display: none;
      z-index: 9;
      pointer-events: none;
    }

    #shield2 {
      position: absolute;
      top: -40px;
      left: -20px;
      width: 180px;
      height: 180px;
      background: radial-gradient(circle at center, rgba(150, 0, 255, 0.3), rgba(150, 0, 255, 0.1));
      border: 2px solid rgba(150, 0, 255, 0.5);
      border-radius: 50%;
      display: none;
      z-index: 11;
      pointer-events: none;
    }

    #skill3-cooldown {
      /* 移除 position: fixed; left: 20px; bottom: 50px; 由父容器控制 */
      width: 36px;
      height: 36px;
      z-index: 999;
      display: none;
    }

    #skill3-cooldown img {
      width: 20px;
      height: 20px;
      top: 8px;
      left: 8px;
      z-index: 2;
      position: absolute;
    }

    #skill3-cooldown svg {
      position: absolute;
      width: 36px;
      height: 36px;
      transform: rotate(-90deg);
      z-index: 1;
    }

    #cooldown-ring {
      fill: none;
      stroke: rgba(0, 0, 0, 0.5);
      stroke-width: 4;
      stroke-linecap: round;
    }
  </style>
</head>
<body>

<div class="top-right-buttons">
  <div class="btn" data-key="1" tabindex="0" style="background-color: #d0eaff; border-radius: 50%;">1</div>
  <div class="btn" data-key="2" tabindex="0" style="background-color: #e0d0ff; border-radius: 0 0 50% 50%;">2</div>
  <div class="btn" data-key="3" tabindex="0" id="dynamic-skill-btn" style="position: relative;">
    <img src="./宝剑.png" alt="sword1" style="width: 24px; height: 24px;">
    <svg id="dynamic-cooldown-ring" viewBox="0 0 36 36" style="position:absolute; width:36px; height:36px; transform: rotate(-90deg); z-index:1; display:none;">
      <path stroke-dasharray="100, 100" id="dynamic-cooldown-ring-path" fill="none" stroke="rgba(0,0,0,0.5)" stroke-width="4" stroke-linecap="round"
            d="M18 2 a 16 16 0 1 1 0 32 a 16 16 0 1 1 0 -32"/>
    </svg>
  </div>
</div>

<!-- 左右角色图片 -->
<div class="play">
  <img id="cartoon-girl" src="./卡通女孩.png" alt="卡通女孩" />
  <img id="monster" src="./小怪兽.png" alt="小怪兽" />
  <div id="monster-hp-container">
    <div id="monster-hp-bar"></div>
  </div>
  <!-- 火球图片 -->
  <img id="fireball" src="./hot.png" alt="火球" />
  <div id="shield"></div>
  <div id="shield2"></div>

<!--  宝剑图片-->
  <img id="sword1" src="./宝剑.png" alt="" style="display: none;">
  <img id="sword2" src="./剑.png" alt="" style="display: none;">
  <img id="sword3" src="./剑%20(1).png" alt="" style="display: none;">
</div>

<!-- 技能3冷却显示容器父容器，横向排列 -->
  <div id="skill3-cooldowns" style="display: flex; flex-direction: row; position: fixed; left: 20px; bottom: 50px; z-index: 999; gap: 8px;">
    <div id="skill3-cooldown" style="width: 36px; height: 36px; display: none; position: relative;">
    <img src="./宝剑.png" alt="技能3图标" />
    <svg viewBox="0 0 36 36">
      <path id="cooldown-ring"
            stroke-dasharray="100, 100"
            d="M18 2
               a 16 16 0 1 1 0 32
               a 16 16 0 1 1 0 -32"/>
    </svg>
  </div>
    <!-- 技能3第二段冷却显示容器 -->
    <div id="skill3-stage2-cooldown" style="width:36px; height:36px; display:none; position: relative;">
      <img src="./剑.png" alt="技能3阶段2图标" style="width:20px; height:20px; position:absolute; top:8px; left:8px; z-index:2;">
      <svg viewBox="0 0 36 36" style="position:absolute; width:36px; height:36px; transform: rotate(-90deg); z-index:1;">
        <path id="cooldown-ring-stage2"
              stroke-dasharray="100, 100"
              d="M18 2
                 a 16 16 0 1 1 0 32
                 a 16 16 0 1 1 0 -32"
              fill="none"
              stroke="rgba(0,0,0,0.5)"
              stroke-width="4"
              stroke-linecap="round"></path>
      </svg>
    </div>
    <!-- 技能3第三段冷却显示容器 -->
    <div id="skill3-stage3-cooldown" style="width: 36px; height: 36px; display: none; position: relative;">
      <img src="./剑 (1).png" alt="技能3阶段3图标" style="width: 20px; height: 20px; position: absolute; top: 8px; left: 8px; z-index: 2;">
      <svg viewBox="0 0 36 36" style="position: absolute; width: 36px; height: 36px; transform: rotate(-90deg); z-index: 1;">
        <path id="cooldown-ring-stage3" stroke-dasharray="100, 100" d="M18 2 a 16 16 0 1 1 0 32 a 16 16 0 1 1 0 -32" fill="none" stroke="rgba(0,0,0,0.5)" stroke-width="4" stroke-linecap="round"></path>
      </svg>
    </div>
</div>

<!-- HP Bar at bottom left -->
<div id="hp-container">
  <div id="hp-bar"></div>
</div>

<script>
  console.log('脚本加载完成');

  let gamePaused = false;

  // 记录3号技能按下次数
  let skill3Count = 0;
  let skill3Cooling = false;
  let skill3Stage2Cooling = false;
  let skill3Stage3Cooling = false;

  // 动态技能按钮冷却追踪器
  let dynamicCooldownTracker = null;
  let dynamicCooldownStart = 0;
  let dynamicCooldownDuration = 0;

  // 点击按钮触发事件
  document.querySelectorAll('.btn').forEach(btn => {
    btn.addEventListener('click', () => {
      const key = btn.dataset.key;
      // alert('按钮 ' + key + ' 被点击了');
      if (key === '2') {
        activateShield2();
      }
      if (key === '3') {
        triggerSkill3();
      }
    });
  });

  const girl = document.getElementById('cartoon-girl');
  const shield = document.getElementById('shield');
  const hpBar = document.getElementById('hp-bar');

  const shield2 = document.createElement('div');
  shield2.id = 'shield2';
  girl.parentElement.appendChild(shield2);

  const monster = document.getElementById('monster');
  const monsterHpBar = document.getElementById('monster-hp-bar');
  let monsterHp = 100;

  let hp = 100;
  let fireballCount = 0;

  function updateHpBar() {
    hpBar.style.width = hp + '%';
    if (hp === 0 && !document.getElementById('death-overlay')) {
      gamePaused = true;
      const overlay = document.createElement('div');
      overlay.id = 'death-overlay';
      overlay.style.position = 'fixed';
      overlay.style.top = '0';
      overlay.style.left = '0';
      overlay.style.width = '100%';
      overlay.style.height = '100%';
      overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
      overlay.style.color = 'white';
      overlay.style.display = 'flex';
      overlay.style.flexDirection = 'column';
      overlay.style.justifyContent = 'center';
      overlay.style.alignItems = 'center';
      overlay.style.zIndex = '1000';

      const message = document.createElement('div');
      message.textContent = '你已死亡';
      message.style.fontSize = '32px';
      message.style.marginBottom = '20px';

      const button = document.createElement('button');
      button.textContent = '再来一次';
      button.style.padding = '10px 20px';
      button.style.fontSize = '18px';
      button.style.cursor = 'pointer';

      button.addEventListener('click', () => {
        location.reload();
      });

      overlay.appendChild(message);
      overlay.appendChild(button);
      document.body.appendChild(overlay);
    }
  }

  function updateMonsterHpBar() {
    monsterHpBar.style.width = monsterHp + '%';
    if (monsterHp === 0 && !document.getElementById('win-overlay')) {
      gamePaused = true;
      const overlay = document.createElement('div');
      overlay.id = 'win-overlay';
      overlay.style.position = 'fixed';
      overlay.style.top = '0';
      overlay.style.left = '0';
      overlay.style.width = '100%';
      overlay.style.height = '100%';
      overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
      overlay.style.color = 'white';
      overlay.style.display = 'flex';
      overlay.style.flexDirection = 'column';
      overlay.style.justifyContent = 'center';
      overlay.style.alignItems = 'center';
      overlay.style.zIndex = '1000';

      const message = document.createElement('div');
      message.textContent = '你赢了！';
      message.style.fontSize = '32px';
      message.style.marginBottom = '20px';

      const button = document.createElement('button');
      button.textContent = '再来一次';
      button.style.padding = '10px 20px';
      button.style.fontSize = '18px';
      button.style.cursor = 'pointer';

      button.addEventListener('click', () => {
        location.reload();
      });

      overlay.appendChild(message);
      overlay.appendChild(button);
      document.body.appendChild(overlay);
    }
  }

  document.addEventListener('keydown', e => {
    if (e.key === '1') {
      shield.style.display = 'block';
      setTimeout(() => {
        shield.style.display = 'none';
      }, 2000);
    }
    if (e.key === '2') {
      activateShield2();
    }
    if (e.key === '3') {
      triggerSkill3();
    }
  });

  // 更新技能3按钮图标，根据技能冷却状态动态判断
  function updateSkill3Icon() {
    const img = document.querySelector('#dynamic-skill-btn img');
    const cooldownRing = document.getElementById('dynamic-cooldown-ring');
    if (!img) return;
    // 按照冷却状态选择图标
    if (!skill3Cooling) {
      img.src = './宝剑.png';
      img.alt = 'sword1';
      if (cooldownRing) cooldownRing.style.display = 'none';
      dynamicCooldownTracker = null;
    } else if (!skill3Stage2Cooling) {
      img.src = './剑.png';
      img.alt = 'sword2';
      if (cooldownRing) cooldownRing.style.display = 'none';
      dynamicCooldownTracker = null;
    } else if (!skill3Stage3Cooling) {
      img.src = './剑 (1).png';
      img.alt = 'sword3';
      if (cooldownRing) cooldownRing.style.display = 'none';
      dynamicCooldownTracker = null;
    } else {
      // 全部都在冷却时，显示最近开始冷却的技能图标，并显示进度环
      if (dynamicCooldownTracker === 'sword1') {
        img.src = './宝剑.png';
        img.alt = 'sword1';
      } else if (dynamicCooldownTracker === 'sword2') {
        img.src = './剑.png';
        img.alt = 'sword2';
      } else if (dynamicCooldownTracker === 'sword3') {
        img.src = './剑 (1).png';
        img.alt = 'sword3';
      } else {
        img.src = '';
        img.alt = '';
      }
      if (cooldownRing) cooldownRing.style.display = '';
      updateDynamicCooldownRing();
    }
  }

  // 宝剑攻击技能
  function triggerSkill3() {
    skill3Count++;
    updateSkill3Icon();

    if (skill3Count === 1 && !skill3Cooling) {
      skill3Cooling = true;
      document.getElementById('skill3-cooldown').style.display = 'block';
      let cooldownStart = performance.now();
      const cooldownDuration = 5000;

      // 记录冷却追踪器
      dynamicCooldownTracker = 'sword1';
      dynamicCooldownStart = cooldownStart;
      dynamicCooldownDuration = cooldownDuration;
      updateSkill3Icon();

      function animateCooldown() {
        const elapsed = performance.now() - cooldownStart;
        const percent = Math.min(100, (elapsed / cooldownDuration) * 100);
        const dash = 100 - percent;
        document.getElementById('cooldown-ring').setAttribute('stroke-dasharray', `${dash},100`);

        if (percent >= 100) {
          skill3Cooling = false;
          document.getElementById('skill3-cooldown').style.display = 'none';
          skill3Count = 0;
          // 若当前冷却追踪为此段，重置
          if (dynamicCooldownTracker === 'sword1') {
            dynamicCooldownTracker = null;
          }
          updateSkill3Icon();
        } else {
          requestAnimationFrame(animateCooldown);
        }
      }

      animateCooldown();

      // sword1 logic
      const swordTemplate = document.getElementById('sword1');
      const sword = swordTemplate.cloneNode(true);
      sword.removeAttribute('id');
      sword.style.display = 'block';
      sword.style.position = 'absolute';
      sword.style.left = monster.offsetLeft + monster.offsetWidth / 2 - 25 + 'px';
      sword.style.top = '-300px';
      sword.style.width = '50px';
      sword.style.height = 'auto';
      sword.style.zIndex = '15';
      document.body.appendChild(sword);

      const start = performance.now();
      const duration = 500;

      function drop() {
        const elapsed = performance.now() - start;
        if (elapsed > duration) {
          // 检测是否击中怪兽
          const swordRect = sword.getBoundingClientRect();
          const monsterRect = monster.getBoundingClientRect();
          const hit = !(swordRect.right < monsterRect.left ||
                        swordRect.left > monsterRect.right ||
                        swordRect.bottom < monsterRect.top ||
                        swordRect.top > monsterRect.bottom);
          if (hit) {
            monsterHp = Math.max(0, monsterHp - 20);
            updateMonsterHpBar();
          }
          sword.remove();
          return;
        }

        const progress = elapsed / duration;
        sword.style.top = -300 + progress * (monster.offsetTop + 300) + 'px';
        requestAnimationFrame(drop);
      }

      drop();
    } else if (!skill3Stage2Cooling && skill3Count === 2) {
      skill3Stage2Cooling = true;
      const cooldownElement = document.getElementById('skill3-stage2-cooldown');
      cooldownElement.style.display = 'block';
      let cooldownStart = performance.now();
      const cooldownDuration = 10000;

      // 记录冷却追踪器
      dynamicCooldownTracker = 'sword2';
      dynamicCooldownStart = cooldownStart;
      dynamicCooldownDuration = cooldownDuration;
      updateSkill3Icon();

      function animateCooldownStage2() {
        const elapsed = performance.now() - cooldownStart;
        const percent = Math.min(100, (elapsed / cooldownDuration) * 100);
        const dash = 100 - percent;
        document.getElementById('cooldown-ring-stage2').setAttribute('stroke-dasharray', `${dash},100`);

        if (percent >= 100) {
          skill3Stage2Cooling = false;
          cooldownElement.style.display = 'none';
          skill3Count = 0; // reset count after stage2 cooldown finishes
          if (dynamicCooldownTracker === 'sword2') {
            dynamicCooldownTracker = null;
          }
          updateSkill3Icon();
        } else {
          requestAnimationFrame(animateCooldownStage2);
        }
      }

      animateCooldownStage2();

      // sword2 logic
      const swordTemplate = document.getElementById('sword2');
      const sword = swordTemplate.cloneNode(true);
      sword.removeAttribute('id');
      sword.style.display = 'block';
      sword.style.position = 'absolute';
      sword.style.left = monster.offsetLeft - 200 + 'px';
      sword.style.top = monster.offsetTop + 100 + 'px';
      sword.style.width = '50px';
      sword.style.height = 'auto';
      sword.style.zIndex = '15';
      document.body.appendChild(sword);

      const duration = 500;
      const startX = monster.offsetLeft - 200;
      const startY = monster.offsetTop + 100;
      const endX = monster.offsetLeft + 50;
      const endY = monster.offsetTop + 50;
      const start = performance.now();

      function fly() {
        const elapsed = performance.now() - start;
        const progress = Math.min(elapsed / duration, 1);
        sword.style.left = startX + (endX - startX) * progress + 'px';
        sword.style.top = startY + (endY - startY) * progress + 'px';

        const swordRect = sword.getBoundingClientRect();
        const monsterRect = monster.getBoundingClientRect();
        const hit = !(swordRect.right < monsterRect.left ||
                      swordRect.left > monsterRect.right ||
                      swordRect.bottom < monsterRect.top ||
                      swordRect.top > monsterRect.bottom);
        if (hit) {
          monsterHp = Math.max(0, monsterHp - 20);
          updateMonsterHpBar();
          sword.remove();
          return;
        }

        if (progress < 1) {
          requestAnimationFrame(fly);
        } else {
          sword.remove();
        }
      }

      fly();
    } else if (!skill3Stage3Cooling && skill3Cooling && skill3Stage2Cooling && skill3Count === 3) {
      skill3Stage3Cooling = true;
      const cooldownElement = document.getElementById('skill3-stage3-cooldown');
      cooldownElement.style.display = 'block';
      let cooldownStart = performance.now();
      const cooldownDuration = 1700;
      let finished = false;

      // 记录冷却追踪器
      dynamicCooldownTracker = 'sword3';
      dynamicCooldownStart = cooldownStart;
      dynamicCooldownDuration = cooldownDuration;
      updateSkill3Icon();

      function animateCooldownStage3() {
        const elapsed = performance.now() - cooldownStart;
        const percent = Math.min(100, (elapsed / cooldownDuration) * 100);
        const dash = 100 - percent;
        document.getElementById('cooldown-ring-stage3').setAttribute('stroke-dasharray', `${dash},100`);

        if (percent >= 100 && !finished) {
          // 冷却动画完成的第一帧，立刻重置状态
          skill3Stage3Cooling = false;
          cooldownElement.style.display = 'none';
          skill3Count = 0;
          finished = true;
          if (dynamicCooldownTracker === 'sword3') {
            dynamicCooldownTracker = null;
          }
          updateSkill3Icon();
          console.log("技能3冷却完毕");
        }
        if (!finished) {
          requestAnimationFrame(animateCooldownStage3);
        }
      }

      animateCooldownStage3();

      // sword3 logic
      const swordTemplate = document.getElementById('sword3');
      const sword = swordTemplate.cloneNode(true);
      sword.removeAttribute('id');
      sword.style.display = 'block';
      sword.style.position = 'absolute';
      sword.style.left = '0px';
      sword.style.top = '0px';
      sword.style.width = '50px';
      sword.style.height = 'auto';
      sword.style.zIndex = '15';
      document.body.appendChild(sword);

      const duration = 600;
      const startX = 0;
      const startY = 0;
      const endX = monster.offsetLeft + 50;
      const endY = monster.offsetTop + 50;
      const start = performance.now();

      function fly3() {
        const elapsed = performance.now() - start;
        const progress = Math.min(elapsed / duration, 1);
        sword.style.left = startX + (endX - startX) * progress + 'px';
        sword.style.top = startY + (endY - startY) * progress + 'px';

        const swordRect = sword.getBoundingClientRect();
        const monsterRect = monster.getBoundingClientRect();
        const hit = !(swordRect.right < monsterRect.left ||
                      swordRect.left > monsterRect.right ||
                      swordRect.bottom < monsterRect.top ||
                      swordRect.top > monsterRect.bottom);
        if (hit) {
          monsterHp = Math.max(0, monsterHp - 20);
          updateMonsterHpBar();
          sword.remove();
          return;
        }

        if (progress < 1) {
          requestAnimationFrame(fly3);
        } else {
          sword.remove();
        }
      }

      fly3();
    }
  }

  // 动态技能按钮顶部冷却进度环动画
  function updateDynamicCooldownRing() {
    // 仅在全部技能都冷却时显示
    const ring = document.getElementById('dynamic-cooldown-ring');
    const ringPath = document.getElementById('dynamic-cooldown-ring-path');
    if (!ring || !ringPath) return;
    if (!dynamicCooldownTracker || !dynamicCooldownStart || !dynamicCooldownDuration) {
      ring.style.display = 'none';
      return;
    }
    // 若冷却已过，隐藏
    const now = performance.now();
    const elapsed = now - dynamicCooldownStart;
    const percent = Math.min(100, (elapsed / dynamicCooldownDuration) * 100);
    const dash = 100 - percent;
    ringPath.setAttribute('stroke-dasharray', `${dash},100`);
    ring.style.display = '';
    if (percent < 100 && skill3Cooling && skill3Stage2Cooling && skill3Stage3Cooling) {
      requestAnimationFrame(updateDynamicCooldownRing);
    } else if (percent >= 100) {
      ring.style.display = 'none';
    }
  }

  function activateShield2() {
    shield2.style.display = 'block';
    setTimeout(() => {
      shield2.style.display = 'none';
    }, 500);
  }

  function createFireball() {
    if (hp <= 0 || gamePaused) return;
    fireballCount++;
    console.log(`发射火球 ${fireballCount}`);

    const fireball = document.createElement('img');
    fireball.src = './hot.png';
    fireball.style.position = 'absolute';
    fireball.style.top = girl.offsetTop + 30 + 'px'; // 贴近女孩位置
    fireball.style.right = '120px';
    fireball.style.width = '50px';
    fireball.style.height = 'auto';
    fireball.style.zIndex = '10';

    fireball.onerror = () => console.warn('⚠️ 图片加载失败！');

    document.body.appendChild(fireball);

    const duration = 1000; // 飞行时长1秒
    const startTime = performance.now();

    function move() {
      const elapsed = performance.now() - startTime;
      if (elapsed > duration) {
        fireball.remove();
        scheduleNext();
        return;
      }

      const progress = elapsed / duration;
      // 从右边向左移动，right 从 120px 变成 window.innerWidth + 50px
      fireball.style.right = 120 + progress * (window.innerWidth + 50) + 'px';

      const fireballRect = fireball.getBoundingClientRect();
      const girlRect = girl.getBoundingClientRect();

      const isCollide = !(fireballRect.right < girlRect.left ||
                          fireballRect.left > girlRect.right ||
                          fireballRect.bottom < girlRect.top ||
                          fireballRect.top > girlRect.bottom);

      if (isCollide) {
        if (shield2.style.display === 'block') {
          // 反弹火球效果
          fireball.remove();
          reflectFireball();
          scheduleNext();
          return;
        }
        if (shield.style.display !== 'block') {
          hp = Math.max(0, hp - 20);
          updateHpBar();
        }
        fireball.remove();
        scheduleNext();
        return;
      }

      requestAnimationFrame(move);
    }

    move();
  }

  function reflectFireball() {
    const fb = document.createElement('img');
    fb.src = './hot.png';
    fb.style.position = 'absolute';
    fb.style.top = girl.offsetTop + 30 + 'px';
    fb.style.left = girl.offsetLeft + girl.offsetWidth + 10 + 'px';
    fb.style.width = '50px';
    fb.style.height = 'auto';
    fb.style.zIndex = '10';
    fb.style.transform = 'scaleX(-1)';
    document.body.appendChild(fb);

    const duration = 2000;
    const start = performance.now();

    function moveBack() {
      const elapsed = performance.now() - start;

      const fbRect = fb.getBoundingClientRect();
      const monsterRect = monster.getBoundingClientRect();
      const hitMonster = !(fbRect.right < monsterRect.left ||
                           fbRect.left > monsterRect.right ||
                           fbRect.bottom < monsterRect.top ||
                           fbRect.top > monsterRect.bottom);
      if (hitMonster) {
        monsterHp = Math.max(0, monsterHp - 20);
        updateMonsterHpBar();
        fb.remove();
        return;
      }

      if (elapsed > duration) {
        fb.remove();
        return;
      }
      const progress = elapsed / duration;
      fb.style.left = girl.offsetLeft + girl.offsetWidth + 10 + progress * (window.innerWidth - 100) + 'px';
      requestAnimationFrame(moveBack);
    }

    moveBack();
  }

  function scheduleNext() {
    if (gamePaused) return;
    console.log('调度下一发火球...');
    setTimeout(createFireball, 300 + Math.random() * 700);
  }

  updateHpBar();
  updateMonsterHpBar();
  scheduleNext();
</script>
</body>
</html>